<template>
  <el-table :data="reserveBook" style="width: 100%">
    <el-table-column prop="isbn" label="ISBN" width="150"></el-table-column>
    <el-table-column prop="id" label="bookId" width="150"></el-table-column>
    <el-table-column
      prop="reservationDate"
      label="reservation date"
      width="180"
      :formatter="dateFormatter"
    ></el-table-column>
    <el-table-column
      prop="reservationDate"
      label="appointment due time"
      width="180"
      :formatter="appointmentReservationFormatter"
    ></el-table-column>
    <!-- <el-table-column
      prop="waitNum"
      label="预约排队数"
      width="120"
    ></el-table-column> -->
    <!-- <el-table-column
      prop="status"
      label="是否可借阅"
      width="120"
      :formatter="canReserveFormatter"
    ></el-table-column> -->
    <el-table-column
      prop="status"
      label="validation"
      width="120"
      :formatter="validFormatter"
    ></el-table-column>
    <el-table-column label="cancel the reserve">
      <template v-slot="scope">
        <el-button type="primary" value="return"
          @click="cancelReserveBook(scope.row)"
          :disabled="scope.row.valid == 0"
          >cancel</el-button
        >
      </template>
    </el-table-column>
    <!-- <el-table-column label="借阅图书">
      <template v-slot="scope">
        <el-button type="primary" value="return"
          @click="getTheReserveBook(scope.row)"
          :disabled="scope.row.status == 0 || scope.row.valid == 0"
          >借阅</el-button
        >
      </template>
    </el-table-column> -->
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as bookApi from "@/api/books";
import { ElMessage } from "element-plus";
import type { ReserveBook } from "@/domain/book";
import { log } from "console";

const reserveBook = ref<ReserveBook[]>([]);
const getAllReserveBooks = () => {
  bookApi.getAllReserveBooks().then((data) => {
    reserveBook.value = data;
  });
};
const cancelReserveBook = (params: { id: number }) => {
  bookApi.cancelReserveBook({ bookId: params.id }).then(() => {
    ElMessage.success("cancel success");
    setTimeout(() => getAllReserveBooks(), 1000);
  })
  .catch(err => {
    ElMessage.error(err);
  });
};
const getTheReserveBook = (params: { bookId: string }) => {
  let isbn = params.bookId;
  bookApi.getTheReserveBook({ isbn: isbn }).then(() => {
    ElMessage.success("borrow success");
    setTimeout(() => getAllReserveBooks(), 1000);
  })
  .catch(err => {
    ElMessage.error(err);
  });
};
const dateFormatter = (row: any, col: any, value: string | number | Date) => {
  return `${new Date(value).toLocaleDateString()} ${new Date(value).toLocaleTimeString()}`;
};
const appointmentReservationFormatter = (row: any, col: any, value: string | number | Date) => {
  const date = new Date(value + 4 * 60 * 60 * 1000);
  return `${new Date(date).toLocaleDateString()} ${new Date(date).toLocaleTimeString()}`;
};
const canReserveFormatter = (row: any, col: any, value: string | number) => {
  return Number(value) === 1 ? "yes" : "no";
};
const validFormatter = (row: any, col: any, value: string | number) => {
  return Number(value) === 1 ? "yes" : "no";
};
onMounted(() => {
  getAllReserveBooks();
});
</script>

<style scoped></style>
